<template>
	<view class="content">
		<div class="list" v-for="(item, index) in scenicList" :key="index">
			<div class="title">{{item.UUttitle}}</div>
			<div class="main" @click="goRouter('/pages/orderDetail/index', item)">
				<img :src="item.scenicSpotsPicture" alt="" class="scenic" v-if="item.scenicSpotsPicture">
				<div class="detail">
					<div class="time">下单时间：{{item.orderTime}}</div>
					<!-- <div class="time">订单有效时间：{{item.UUbegintime + '-' +  item.UUendtime}}</div> -->
					<div class="number">数量：{{item.quantity}}</div>
					<div class="price">实付：{{parseFloat(item.orderAmount / 100).toFixed(2)}}</div>
				</div>
			</div>
			<!-- @click="goRouter('/pages/listEvaluate/index')" -->
			<div  v-if="item.reviewStatus == 1" class="more"  
				@click="evaluate('/pages/listEvaluate/index?id=' + item.id +'&tel=' + item.contactPhone +'&type=' + '1' )">
				<div style="margin-left: -55rpx;">我的评价</div>
				<img src="../../static/img/more-icon.png" alt="">
			</div>
			<div v-else class="more"  @click="evaluate('/pages/listEvaluate/index?id=' + item.id +'&tel=' + item.contactPhone )">
				<div>评价</div>
				<img src="../../static/img/more-icon.png" alt="">
			</div>

		</div>
		<view class="" style="margin-top: 32rpx">
			<u-loadmore :status="status" />
		</view>
		

	</view>

</template>

<script>
	export default {
		onLoad() {
			this.getList();
		},
		data() {
			return {
				status: 'loadmore', // 加载前值为loadmore，加载中为loading，没有数据为nomore
				scenicList: [
					{
						title: '沈阳景区名称XXXXXX',
						time: '2024-01-01 19:30',
						number: 1,
						price: '180元',
						src: "../../static/img/scenic.png"
					},
					// {
					// 	title: '沈阳景区名称XXXXXX',
					// 	time: '2024-01-02 19:30',
					// 	number: 1,
					// 	price: '280元',
					// 	src: "../../static/img/scenic.png"
					// },
					// {
					// 	title: '沈阳景区名称XXXXXX',
					// 	time: '2024-01-03 19:30',
					// 	number: 1,
					// 	price: '380元',
					// 	src: "../../static/img/scenic.png"
					// }, {
					// 	title: '沈阳景区名称XXXXXX',
					// 	time: '2024-01-04 19:30',
					// 	number: 1,
					// 	price: '480元',
					// 	src: "../../static/img/scenic.png"
					// }
				]
			}
		},
		methods: {
			// 敬请期待
			jqqd() {
				uni.showToast({
					title: '敬请期待',
					duration: 2000,
					icon: 'none'
				});
			},
			// 去评价
			evaluate(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 获取列表
			getList() {
				this.status = 'loading';
				this.$http({
					url:this.$myApi.orderList + '?customerId=' + uni.getStorageSync('openId').userId,
					method:'GET',
					hideLoading:true,
					data:{},
					success:res=>{
						res.rows = res.rows.sort((a, b) => new Date(b.orderTime) - new Date(a.orderTime))
						// console.log(res.rows, '订单')
						this.scenicList = res.rows;
						// console.log('是否显示----------',res)
						
					},
					fail:err=>{
						console.log(err);
					},
					complete:e=>{
						this.status = 'nomore'
					}
				})
			},
			goRouter(url, item) {
				// uni.navigateTo({
				// 	url: url + '?data=' + JSON.stringify(item.)
				// })
				uni.navigateTo({
					url: url + '?id=' + item.id
				})
			},

		},

	}
</script>
<style>
	page {
		background-color: #F6F9FF;
		padding-bottom: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;

		.list {
			width: 690rpx;
			// height: 246rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding-bottom: 26rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			position: relative;

			.title {
				width: 378rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #1C1C1C;
				line-height: 0rpx;
				margin-left: 26rpx;
				margin-top: 26rpx;
				position: absolute;
				
			}

			.main {
				display: flex;

				.scenic {
					width: 160rpx;
					height: 110rpx;
					margin-left: 26rpx;
					margin-top: 45rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.detail {
					margin-top: 35rpx;
					margin-left: 37rpx;

					.time {
						width: 468rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #212121;
						margin-top: 5rpx;
					}

					.number {
						width: 468rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #212121;
						margin-top: 5rpx;
					}

					.price {
						width: 468rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #212121;
						margin-top: 5rpx;
					}
				}

			}

			.more {
				display: flex;
				margin-left: 580rpx;

				img {
					width: 24rpx;
					height: 24rpx;
					margin-top: 10rpx;
					margin-left: 15rpx;

				}
			}
		}
	}
	
</style>